import React, { useMemo, useState } from 'react'
function Child1 () {
  console.log('aaaa')
  return (
    <div>child1</div>
  )
}

function Child2 () {
  console.log('bbbb')

  return (
    <div>child2</div>
  )
}
function App() {
  const [a, setA ] = useState(11)
  const [b, setB ] = useState(11)
  const child1 = useMemo(() => <Child1 a = {a} />, [a])
  const child2 = useMemo(() => <Child2 b = {b} />, [b])
  // const child2 = <Child2 b = { b }/> // 每次都打印
  return (
    <div>
      <button onClick = { () => {
        setA(a + 10)
      }}>改变a</button>
      <button onClick = { () => {
        setB(b + 10)
      }}>改变b</button>
      { child1 }
      { child2 }
    </div>
  )
}

export default App
